﻿<template>
    <div>
        <div class="layout-main">
            <el-form ref="wmsWaybill" inline label-position="left" label-width="80px" :model="wmsWaybill" :rules="rules">
                <input type="hidden" :model="wmsWaybill.id" />
                <el-form-item label="出库仓库" prop="warehouseId">
                    <el-select size="small" v-model="storageBill.warehouseId" placeholder="发往仓库" style="width: 120px">
                        <el-option v-for="ware in warehouses" :key="ware.id" :label="ware.name" :value="ware.id">
                        </el-option>
                    </el-select>
                    <el-button style="margin-left: 10px" type="success" :loading="loadingWarehouse" @click="getWarehouses" size="small">获取仓库信息</el-button>
                </el-form-item>
                <el-form-item label="收货客户" prop="partnerId">
                    <el-select size="small" v-model="storageBill.partnerId" placeholder="收货客户" style="width: 120px">
                        <el-option v-for="ware in partners" :key="ware.id" :label="ware.name" :value="ware.id">
                        </el-option>
                    </el-select>



                </el-form-item>
                <el-form-item label="收货地址" prop="recipientAddress">
                    <el-input v-model="wmsWaybill.recipientAddress" placeholder="" style="width: 240px" size="small" />
                </el-form-item>
                <el-form-item label="收货人" prop="recipientName">
                    <el-input v-model="wmsWaybill.recipientName" placeholder="" style="width: 240px" size="small" />
                </el-form-item>
                <el-form-item label="收货电话" prop="recipientPhone">
                    <el-input v-model="wmsWaybill.recipientPhone" placeholder="" style="width: 240px" size="small" />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="wmsWaybill.remark" placeholder="" style="width: 240px" size="small" />
                </el-form-item>
            </el-form>
            <!--- 货品选择-->
            <el-divider>货品选择</el-divider>
            <el-form ref="el-form-item" label-width="80px" :inline="true" :model="item">
                <el-form-item prop="productId">
                    <el-select size="small" style="width: 280px" @change="changeProduct" clear="item={}" clearable :loading="searchLoading" placeholder="可输入、sku码 进行搜索" filterable remote :remote-method="remoteMethod" v-model="item.productId">
                        <el-option v-for="(product,ind) in products" :key="ind" :label="product.variationName+','+product.skuCode" :value="product.id">
                            <span style="float: right;color: #8492a6; font-size: 13px">{{product.variationName}}
                                （{{product.stock}}件）</span>
                            <span style="float: left;">skuCode:{{product.skuCode }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="quantity" :rules="[{required:true,message:'入库数量不能为空', trigger: 'blur'}]">
                    <el-input size="small" type="number" v-model="item.quantity" placeholder="商品数量>0" />
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="submitForm('el-form-item')">添加</el-button>
                </el-form-item>
            </el-form>
            <el-form :inline="true" ref="itemForm" :model="storageBill">
                <el-table :data="storageBill.items" stripe style="width: 100%">
                    <el-table-column prop="productName" label="图片" width="120">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.thumb" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="productName" label="商品名称" width="180">
                    </el-table-column>
                    <el-table-column prop="variationName" label="商品规格" width="180">
                    </el-table-column>
                    <el-table-column prop="skuCode" label="sku编码" width="180">
                    </el-table-column>
                    <el-table-column prop="quantity" label="数量" width="120">
                        <template slot-scope="scope">
                            <el-form-item :rules="[{required:true,message:'数量不能为空'}]" :prop="'items.' + scope.$index + '.quantity'">
                                <el-input size="small" v-model="scope.row.quantity"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column prop="length" label="长(cm)" width="120"> <template slot-scope="scope">
                            <el-form-item :rules="[{required:true,message:'长不能为空'}]" :prop="'items.' + scope.$index + '.length'">
                                <el-input size="small" v-model="scope.row.length"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column prop="width" label="宽(cm)" width="120">
                        <template slot-scope="scope">
                            <el-form-item :rules="[{required:true,message:'宽不能为空'}]" :prop="'items.' + scope.$index + '.width'">
                                <el-input size="small" v-model="scope.row.width"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column prop="height" label="高(cm)" width="120"> <template slot-scope="scope">
                            <el-form-item :rules="[{required:true,message:'高不能为空'}]" :prop="'items.' + scope.$index + '.height'">
                                <el-input size="small" v-model="scope.row.height"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column prop="volume" label="体积(m³)" width="120"> <template slot-scope="scope">
                            <!--     <el-form-item :rules="[{required:true,message:'体积自动计算'}]" :prop="'items.' + scope.$index + '.volume'">
                                <el-input size="small" v-model="scope.row.volume"></el-input>
                            </el-form-item> -->
                            {{(scope.row.width*scope.row.length*scope.row.height)/1000000 | toFixed(4)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="id" label="操作">
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-button size="small" @click.prevent="removeDomain(scope.row)">删除</el-button>
                            </el-form-item>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div>
                <el-button size="small" @click="cancel">取消</el-button>
                <el-button size="small" type="primary" :loading="modalLoading" @click="ok">确定</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { doWaybillCreate, getWaybillDetail, getPartnerList } 
from "@/api/TradeApi"
import { getWmsList, searchStorageProductList } from "@/api/ProductApi"
export default {
    name: 'WmsWaybill',
    data() {
        return {
            partners:[],
            warehouses: [],
            loadingWarehouse: false,
            loading: false,
            modalLoading: false,

            others: {

            },
            wmsWaybill: {

            },
            rules: {},
            wmsWaybillId: null,
            searchLoading: true,
            products: [],
            item: {
                productName: null, //货号
                productId: null, //實際id
                skuCode: null, //sku码
                quantity: null
            },
            storageBill: {
                warehouseId: 0,
                items: [],
                shippingNo: "",
                counter: 0
            },
            warehouses: [],
        };
    },
    mounted: function() {
        this.wmsWaybillId = this.$route.params.wmsWaybillId;
        this.getDetail();
        this.getWarehouses();
        this.getPartners();
    },
    methods: {
        getPartners() {
            var me=this;
            getPartnerList().then(response => {
                var body = response;
                if (body.status == 0) {
                    me.partners = body.obj.list;
                }
            }, response => {
            });
        },
        getWarehouses() {
            var me = this;
            me.loadingWarehouse = true;
            getWmsList().then(response => {
                var body = response;
                if (body.status == 0) {

                    me.warehouses = body.obj;
                    if (body.obj.length > 0) {
                        // me.warehouse = body.obj[0];
                        me.storageBill.warehouseId = body.obj[0].id;
                        me.storageBill.shippingNo = body.obj[0].shippingNo;
                    }
                }
                me.loadingWarehouse = false;

            }, response => {
                me.loadingWarehouse = false;
            });
        },
        changeProduct: function(pr) {
            //商品选择
            var me = this;
            me.products.forEach((dt, ind) => {

                if (pr == dt.id) {
                    me.item.skuCode = dt.skuCode;
                    me.item.productName = dt.productName;
                    me.item.variationName = dt.variationName;
                    me.item.thumb = dt.pics;
                    me.item.width = dt.width;
                    me.item.height = dt.height;
                    me.item.length = dt.length;
                }
            });
        },
        removeDomain: function(it) {
            var index = this.storageBill.items.indexOf(it)
            if (index !== -1) {
                this.storageBill.items.splice(index, 1)
            }
        },
        submitForm(formName) {
            var me = this;
            if (!me.item.productId) {
                me.errorMessage("请先选择商品");
                return false;
            }
            if (!me.item.quantity) {
                me.errorMessage("请输入商品数量");
                return false;
            }
            let it = {
                productName: me.item.productName,
                skuCode: me.item.skuCode,
                variationName: me.item.variationName,
                productId: me.item.productId,
                thumb: me.item.thumb,
                width: me.item.width,
                height: me.item.height,
                length: me.item.length,
                quantity: me.item.quantity
            };
            //判断是否重复的Id
            this.storageBill.items.push(it);
            this.item = {
                productName: null, //货号
                productId: null, //實際id
                skuCode: null, //sku码
                quantity: null,
                thumb: null,
                boxNo: 0
            };

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        remoteMethod(query) {

            if (query != '') {
                this.loading = true;
            }
            var me = this;
            me.searchLoading = true;
            searchStorageProductList({ warehouseId: this.storageBill.warehouseId, type: 1, name: query }).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.products = body.obj;
                }
                me.searchLoading = false;

            }, response => {
                me.searchLoading = false;
            });

        },

        cbtime: function(value) {

        },
        getDetail: function() {
            if (this.wmsWaybillId == null || this.wmsWaybillId == undefined || this.wmsWaybillId == "") return;
            var me = this;
            me.showLoading();
            getWaybillDetail({ id: me.wmsWaybillId }).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.wmsWaybill = body.obj;

                }
                me.hideLoading();
            }, response => {
                me.hideLoading();
            });
        },

        ok: function() {
            var ok = false;
            this.$refs['wmsWaybill'].validate((valid) => {
                ok = valid;
                if (valid) {

                } else {
                    this.errorMessage('请认真填写数据');
                }
            })
            if (!ok) return;
            var me = this;

            me.modalLoading = true;
            doWaybillCreate(me.wmsWaybill).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.successMessage("保存成功！");

                    me.modalEdit = false;

                } else {
                    me.errorMessage(body.info);
                }
                me.modalLoading = false;
            }, response => {
                me.modalLoading = false;
            });
        },
        cancel: function() {
            this.getDetail();
        }
    }
}
</script>
<style scoped>
</style>